<template>
	<view class="container">
		<div class="tobg">
			<image src="/static/img/agent/addbg.png" mode=""></image>
		</div>
		
		<div class="edit-form">
			<div class="tip">
				<p>重置密码<span style="font-size:12px; color: #B0B0B0; padding-left: 8px;">(密码需6～18个字符)</span></p>
			</div>
			<view class="list-item">
				<u-field
					v-model="mobile"
					label="手机号"
					required
					placeholder="请输入手机号">
				</u-field>
				<u-field
					password
					required
					v-model="newpassword"
					label="新密码"
					placeholder="请输入新密码">
				</u-field>
				<u-field
					v-model="code"
					required
					label="验证码"
					placeholder="请填写验证码">
					<u-button size="mini" slot="right" type="success" @click="getCode">{{codeText}}</u-button>
				</u-field>
				<u-field
					password
					required
					v-model="password"
					label="确认密码"
					placeholder="请输入确认密码">
				</u-field>
			</view>
			<p class="tishi">提示：新密码重新登录时生效</p>
		</div>

		<view class="btn">
			<button type="default" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
import { sendCode, resetPassword } from '../../../api/api.js'
export default {
	data() {
		return {
			mobile: '',
			password: '',
			newpassword:'',
			code: '',
			codeText: '发送短信'
		}
	},
	onLoad(options) {
		console.log(options, 'ddeee');
		this.mobile = options.mobile;
	},
	methods: {
		getCode() {
			sendCode({
				mobile:this.mobile,
				event:'notice'
			}).then(res => {
				console.log(res)
				uni.showToast({
					icon: 'none',
					title: res.msg
				})
			})
		},
		submit() {
			let reg = /^1[3|4|5|7|8|9][0-9]{9}$/;
			if (!reg.test(this.mobile)) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确的手机号'
				})
				return
			}
			if (!this.newpassword) {
				uni.showToast({
					icon: 'none',
					title: '请输入新密码'
				})
				return
			}
			if (this.newpassword !== this.password) {
				uni.showToast({
					icon: 'none',
					title: '两次输入的密码不一致'
				})
				return
			}
			resetPassword({
				mobile: this.mobile,
				newpassword: this.newpassword,
				code: this.code
			}).then(res=>{
				if(res.code == 1){
					uni.showToast({
						icon: 'success',
						title: '修改成功'
					})
					uni.navigateBack({
						delta: 1,
					})
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.container {
	width: 100%;
	height: 100%;
	background: #F7F7F7;
	.tobg{
		width: 100%;
		height: 204px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.edit-form{
		width: 85%;
		background: url('../../../static/img/agent/formbg.png') no-repeat center;
		background-size: 100% 100%;
		position: absolute;
		top: 20px;
		left: calc((15% - 52px) / 2);
		padding: 26px;
		.tip{
			padding: 10px 0;
			p{
				font-weight: 500;
				font-size: 17px;
				color: #000000;
				line-height: 24px
			}
		}
		.u-field{
			margin-bottom: 15px;
		}
		.tishi{
			font-weight: 400;
			font-size: 12px;
			color: #49A1FD;
		}
	}
	.btn {
		width: calc(100% - 60upx);
		margin: 40upx auto;
		height: 90upx;
		position: fixed;
		left: 15px;
		bottom: 100px;
		button {
			width: 100%;
			height: 100%;
			height: 90upx;
			background: linear-gradient( 311deg, #93A4FB 0%, #2F9AFE 100%);
			box-shadow: 0px 2px 6px 0px rgba(20,135,255,0.4);
			border-radius: 22px;
			color: #FFFFFF;
		}
	}
}
</style>
<style>
	::v-deep .u-btn--success{
		width: 96px;
		height: 28px;
		background: linear-gradient(311deg, #93A4FB 0%, #2F9AFE 100%);
		box-shadow: 0px 2px 6px 0px rgba(20,135,255,0.4);
		border-radius: 22px;
		font-size: 14px;
	}
</style>